<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="4" class="el-col2">
        <el-button type="danger" icon="el-icon-plus" @click="showDialog('add')"
          >新增客服</el-button
        >
        <el-button
          type="primary"
          @click="searchdrawer = true"
          icon="el-icon-search"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <k-table
        :data="linkManList"
        :showPage="false"
        ref="linkMantable"
        @sortHandler="sort($event)"
      >
        <el-table-column fixed="left" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showDialog('edit', scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              style="color:#ffc107"
              v-if="scope.row.isenable == true"
              icon="el-icon-close"
              @click="WrittenOfflinkHandler(scope.row.id, false)"
            >
              注销
            </el-button>
            <el-button
              type="text"
              style="color:#ff0000"
              v-else
              icon="el-icon-check"
              @click="WrittenOfflinkHandler(scope.row.id, true)"
            >
              恢复
            </el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="dellinkHandler(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="是否在职" prop="isenable" sortable="custom">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.isenable === true ? '' : 'info'"
            >
              {{ scope.row.isenable === true ? "是" : "否" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="联系人照片" prop="linkman_pic">
          <template slot-scope="scope">
            <el-image
              class="avatar"
              :src="scope.row.linkman_pic"
              :preview-src-list="[scope.row.linkman_pic + '&original=1']"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="二维码" prop="weixin_pic">
          <template slot-scope="scope">
            <el-image
              class="avatar"
              :src="scope.row.weixin_pic"
              :preview-src-list="[scope.row.weixin_pic + '&original=1']"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departname" sortable="custom" />
        <el-table-column label="姓名" prop="linkman" sortable="custom" />
        <el-table-column label="手机号" prop="mobile" sortable="custom" />
        <el-table-column label="QQ" prop="qq" sortable="custom" />
        <el-table-column label="微信昵称" prop="weixin" sortable="custom" />
      </k-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
        :current-page.sync="page"
        @current-change="changePage"
        layout="total, prev, pager, next, jumper"
      />
    </el-row>
    <el-drawer
      :visible.sync="searchdrawer"
      direction="ttb"
      size="20%"
      title="搜索"
    >
      <el-col class="el-coler">
        <el-radio
          v-model="optionsform.usertype"
          label=""
          border
          size="medium"
          @change="changeusertype('')"
          >全部</el-radio
        >
        <el-radio
          v-model="optionsform.usertype"
          label="0"
          border
          size="medium"
          @change="changeusertype('0')"
          >已注销</el-radio
        >
        <el-radio
          v-model="optionsform.usertype"
          label="1"
          border
          size="medium"
          @change="changeusertype('1')"
          >在职</el-radio
        >
        <el-input
          v-model="optionsform.keyword"
          placeholder="请输入姓名/手机号/QQ/部门名称"
          style="max-width: 230px"
          @keyup.enter.native="search"
          ref="keyword"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 0px"
          icon="el-icon-search"
          @click="search"
        >
          查询
        </el-button>
      </el-col>
    </el-drawer>
    <el-dialog
      :title="dialogTitle"
      width="500px"
      :visible.sync="isAddorEdit"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="linkform"
        :model="linkform"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="部门">
          <el-select
            v-model="linkform.departid"
            placeholder="请选择部门"
            prop="departid"
          >
            <el-option
              v-for="(item, index) in departlist"
              :key="index"
              :label="item.departname"
              :value="item.departid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="linkform.no"
            prop="no"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-row>
          <form-input
            label="姓名"
            v-model="linkform.linkman"
            prop="linkman"
            placeholder="请填写姓名"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="手机号"
            v-model="linkform.mobile"
            prop="mobile"
            placeholder="请填写手机号"
          ></form-input>
        </el-row>
        <el-row>
          <form-input
            label="QQ"
            v-model="linkform.qq"
            prop="qq"
            placeholder="请填写QQ"
          ></form-input>
        </el-row>
        <el-form-item label="在职">
          <el-switch v-model="linkform.isenable"></el-switch>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            :action="dataUrl"
            :data="uploadData"
            :show-file-list="false"
            :before-upload="beforeUpload"
            list-type="picture-card"
            :on-success="upload_success"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              width="130"
              style="padding-top:10px;"
            />
            <i v-else class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，建议图片比例：<span>120*120</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="二维码">
          <el-upload
            :action="qrcodedataUrl"
            :data="qrcodeuploadData"
            :show-file-list="false"
            :before-upload="qrcodebeforeUpload"
            list-type="picture-card"
            :on-success="qrcodeupload_success"
          >
            <img
              v-if="qrcodedialogImageUrl"
              :src="qrcodedialogImageUrl"
              width="130"
              style="padding-top:10px"
            />
            <i v-else class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，建议图片比例：<span>120*120</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="dvEdit == false"
          @click="AddlinkHandler('linkform')"
          >{{ btntext }}</el-button
        >
        <el-button
          type="primary"
          v-else
          @click="editlinkHandler(linkform.id, 'linkform')"
          >{{ btntext }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getlinkManApi } from "@/api/cardApi";
import { GetLinkManDetailApi } from "@/api/cardApi";
import { linkManApi } from "@/api/cardApi";
import moment from "moment";
import { baseUrl } from "@/utils/config";
export default {
  inject: ["reload"],
  data() {
    return {
      isAddorEdit: false,
      loading: true,
      dvEdit: false,
      dialogTitle: "",
      page: 1,
      pageSize: 10,
      total: 0,
      searchdrawer: false,
      linkform: {
        id: "",
        departid: "",
        linkman: "",
        mobile: "",
        qq: "",
        isenable: true,
        no: "",
        weixin: ""
      },
      imgurl: "http://img.inheart.cn",
      value: "",
      linkManList: [],
      departlist: [],
      dataUrl: "",
      qrcodedataUrl: "",
      uploadData: {
        guestcode: "",
        gscode: ""
      },
      qrcodeuploadData: {
        guestcode: "",
        gscode: ""
      },
      optionsform: {
        usertype: "",
        keyword: ""
      },
      dialogImageUrl: "",
      uploadimg: "",
      qrcodedialogImageUrl: "",
      qrcodeuploadimg: "",
      btntext: "",
      rules: {
        linkman: [
          { required: true, message: "请填写姓名", trigger: "blur" },
          {
            max: 10,
            message: "姓名长度超出限制，请重新填写",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"]
          }
          //  {
          //   max: 11,
          //   pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
          //   message: '手机号格式不对',
          //   trigger: ['blur', 'change']
          //   }
        ]
      }
    };
  },
  mounted() {
    this.getlinkManData(1, "", "", "", "");
  },
  methods: {
    search() {
      this.searchdrawer = false;
      this.loading = true;
      this.getlinkManData(
        this.page,
        "",
        "",
        this.optionsform.usertype,
        this.optionsform.keyword
      );
    },
    getlinkManData(pageindex, prop, order, usertype, keyword) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      let sort = "";
      if (order != undefined && order.length > 0 && order != null) {
        if (prop == "isenable") {
          prop = "a.isenable";
        }
        if (order == "ascending") {
          sort = prop + " asc ";
        } else if (order == "descending") {
          sort = prop + " desc ";
        }
      }
      getlinkManApi({
        guestcode: guestcode,
        gscode: gscode,
        pagesize: this.pageSize,
        pageindex: pageindex,
        sort: sort,
        username: username,
        userid: userid,
        menuename: "CustomerService",
        menucname: "客服管理",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询",
        usertype: usertype,
        keyword: keyword
      }).then(res => {
        this.loading = false;
        if (res.code == "0") {
          res.data.forEach(element => {
            if (element.linkman_pic == "") {
              element.linkman_pic =
                "http://www.iqp168.com/src/assets/img/noImg_Default.png";
            } else {
              element.linkman_pic = this.imgurl + element.linkman_pic;
            }
            if (element.weixin_pic == "") {
              element.weixin_pic =
                "http://www.iqp168.com/src/assets/img/noImg_Default.png";
            } else {
              element.weixin_pic = this.imgurl + element.weixin_pic;
            }
          });
          this.total = res.datacount;
          this.linkManList = [];
          this.linkManList = res.data;
          this.departlist = [];
          res.depdata.forEach(element => {
            this.departlist.push({
              departid: element.departid,
              departname: element.departname
            });
          });
        } else {
          this.linkManList = [];
          this.departlist = [];
        }
      });
    },
    getLinkManDetailHandler(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      GetLinkManDetailApi({
        guestcode: guestcode,
        gscode: gscode,
        id: val
      }).then(res => {
        if (res.code == "0") {
          this.linkform = res.data[0];
          this.dialogImageUrl = this.imgurl + res.data[0].linkman_pic;
          this.uploadimg = res.data[0].linkman_pic;
          this.qrcodedialogImageUrl = this.imgurl + res.data[0].weixin_pic;
          this.qrcodeuploadimg = res.data[0].weixin_pic;
        }
      });
    },
    changeusertype(val) {
      this.optionsform.usertype = val;
      this.searchdrawer = false;
      this.loading = true;
      this.getlinkManData(this.page, "", "", val, this.optionsform.keyword);
    },
    changePage(val) {
      this.getlinkManData(
        val,
        "",
        "",
        this.optionsform.usertype,
        this.optionsform.keyword
      );
    },
    sort(val) {
      this.getlinkManData(
        this.page,
        val.prop,
        val.order,
        this.optionsform.usertype,
        this.optionsform.keyword
      );
    },
    beforeUpload(file) {
      this.uploadData.guestcode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).reguserno;
      this.uploadData.gscode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).gscode;
    },
    upload_success(response, file, fileList) {
      this.dialogImageUrl = this.imgurl + file.response.statusText;
      this.uploadimg = file.response.statusText;
      this.getlinkManData(
        this.page,
        "",
        "",
        this.optionsform.usertype,
        this.optionsform.keyword
      );
    },
    qrcodebeforeUpload(file) {
      this.qrcodeuploadData.guestcode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).reguserno;
      this.qrcodeuploadData.gscode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).gscode;
    },
    qrcodeupload_success(response, file, fileList) {
      this.qrcodedialogImageUrl = this.imgurl + file.response.statusText;
      this.qrcodeuploadimg = file.response.statusText;
      this.getlinkManData(
        this.page,
        "",
        "",
        this.optionsform.usertype,
        this.optionsform.keyword
      );
    },
    showDialog(type, val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.isAddorEdit = true;
      this.dialogTitle = type === "add" ? "新增用户" : "编辑用户";
      this.dataUrl =
        baseUrl +
        "/api/Card/Departmentimg?guestcode=" +
        guestcode +
        "&gscode=" +
        gscode;
      this.qrcodedataUrl =
        baseUrl +
        "/api/Card/Departmentimg?guestcode=" +
        guestcode +
        "&gscode=" +
        gscode;
      if (type == "add") {
        this.btntext = "添 加";
        this.linkform.departid = this.departlist[0].departid;
      }
      if (type == "edit") {
        this.dvEdit = true;
        this.btntext = "保 存";
        this.getLinkManDetailHandler(val);
      }
    },
    AddlinkHandler(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          linkManApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Add",
            linkman: this.linkform.linkman,
            mobile: this.linkform.mobile,
            qq: this.linkform.qq,
            weixin_pic: this.qrcodeuploadimg,
            linkman_pic: this.uploadimg,
            linkno: this.linkform.no,
            departid: this.linkform.departid,
            isenable: this.linkform.isenable,
            menuename: "CustomerService",
            menucname: "客服管理",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "新增",
            note: JSON.stringify(this.linkform)
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("添加成功");
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    },
    dellinkHandler(val) {
      this.$confirm("您确定要删除当前联系人吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          linkManApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Delete",
            id: val,
            menuename: "CustomerService",
            menucname: "客服管理",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "删除",
            note: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.getlinkManData(
                this.page,
                "",
                "",
                this.optionsform.usertype,
                this.optionsform.keyword
              );
            }
          });
        })
        .catch(() => {});
    },
    editlinkHandler(val, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          linkManApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Edite",
            linkman: this.linkform.linkman,
            mobile: this.linkform.mobile,
            qq: this.linkform.qq,
            weixin_pic: this.qrcodeuploadimg,
            linkman_pic: this.uploadimg,
            linkno: this.linkform.no,
            departid: this.linkform.departid,
            isenable: this.linkform.isenable,
            id: val,
            menuename: "CustomerService",
            menucname: "客服管理",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "更新",
            note: JSON.stringify(this.linkform)
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("修改成功");
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    },
    WrittenOfflinkHandler(val, valbool) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      linkManApi({
        guestcode: guestcode,
        gscode: gscode,
        sType: "WrittenOff",
        id: val,
        isenable: valbool,
        menuename: "CustomerService",
        menucname: "客服管理",
        username: username,
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: valbool == true ? "恢复" : "注销",
        note: val
      }).then(res => {
        if (res.code == "0") {
          if (valbool == true) {
            this.$message.success("恢复成功");
          } else {
            this.$message.success("注销成功");
          }
          this.getlinkManData(
            this.page,
            "",
            "",
            this.optionsform.usertype,
            this.optionsform.keyword
          );
        }
      });
    },
    closeDialog() {
      this.isAddorEdit = false;
      this.linkform.id = "";
      this.linkform.linkman = "";
      this.linkform.no = "";
      this.linkform.mobile = "";
      this.linkform.qq = "";
      this.dialogImageUrl = "";
      this.uploadimg = "";
      this.qrcodedialogImageUrl = "";
      this.qrcodeuploadimg = "";
      this.linkform.isenable = "";
      this.linkform.departid = "";
      this.resetForm("linkform");
    },
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    refresh() {
      this.reload();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
  }
  .el-coler {
    margin-left: 20px;
    margin-top: 20px;
  }
  .el-upload__tip span {
    color: #f56c6c;
  }
  ::v-deep .el-radio {
    margin-right: 10px;
  }
  ::v-deep .el-checkbox {
    margin-right: 10px;
  }
}
</style>
